import React, { useState } from 'react';
import { Button, Form, Input, Space, Table, Typography } from 'antd';
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
import { createStyles } from 'antd-style';

const useStyles = createStyles(({ token }) => ({
  headerContainer: {
    padding: '16px',
    backgroundColor: token.colorBgContainer,
    borderRadius: token.borderRadius,
    border: `1px solid ${token.colorBorderSecondary}`,
    boxShadow: `0 1px 2px ${token.colorBorderSecondary}`,
    transition: 'all 0.3s',
    '&:hover': {
      boxShadow: `0 3px 6px rgba(0, 0, 0, 0.1)`,
    },
  },
  headerTitle: {
    marginBottom: '16px',
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  addButton: {
    marginTop: '12px',
    height: '36px',
    transition: 'all 0.3s',
    '&:hover': {
      transform: 'translateY(-1px)',
      boxShadow: `0 2px 4px ${token.colorBorderSecondary}`,
    },
  },
  tableStyles: {
    '& .ant-table-thead > tr > th': {
      backgroundColor: token.colorBgLayout,
      fontWeight: 'bold',
    },
    '& .ant-table-tbody > tr > td': {
      padding: '12px 8px',
    },
    '& .ant-table-tbody > tr:hover > td': {
      backgroundColor: token.colorBgTextHover,
    },
  },
}));

interface HeaderItem {
  key: string;
  name: string;
  value: string;
}

interface RequestHeaderProps {
  headers: HeaderItem[];
  onHeadersChange: (headers: HeaderItem[]) => void;
}

const RequestHeader: React.FC<RequestHeaderProps> = ({ headers, onHeadersChange }) => {
  const { styles } = useStyles();
  const [form] = Form.useForm();

  const handleAdd = () => {
    const newHeader = {
      key: `header-${Date.now()}`,
      name: '',
      value: '',
    };
    onHeadersChange([...headers, newHeader]);
  };

  const handleDelete = (key: string) => {
    onHeadersChange(headers.filter((item) => item.key !== key));
  };

  const handleChange = (key: string, field: 'name' | 'value', value: string) => {
    onHeadersChange(
      headers.map((item) => {
        if (item.key === key) {
          return { ...item, [field]: value };
        }
        return item;
      }),
    );
  };

  const columns = [
    {
      title: '参数名',
      dataIndex: 'name',
      key: 'name',
      width: '40%',
      render: (text: string, record: HeaderItem) => (
        <Input
          value={text}
          onChange={(e) => handleChange(record.key, 'name', e.target.value)}
          placeholder="请输入参数名"
        />
      ),
    },
    {
      title: '参数值',
      dataIndex: 'value',
      key: 'value',
      width: '40%',
      render: (text: string, record: HeaderItem) => (
        <Input
          value={text}
          onChange={(e) => handleChange(record.key, 'value', e.target.value)}
          placeholder="请输入参数值"
        />
      ),
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: HeaderItem) => (
        <Button
          type="text"
          danger
          icon={<DeleteOutlined />}
          onClick={() => handleDelete(record.key)}
        />
      ),
    },
  ];

  return (
    <div className={styles.headerContainer}>
      <div className={styles.headerTitle}>
        <Typography.Title level={5}>请求头</Typography.Title>
      </div>
      <Table
        columns={columns}
        dataSource={headers}
        pagination={false}
        size="small"
        rowKey="key"
      />
      <Button
        type="dashed"
        onClick={handleAdd}
        icon={<PlusOutlined />}
        className={styles.addButton}
        block
      >
        添加请求头
      </Button>
    </div>
  );
};

export default RequestHeader;